





$color-app: white;
$color-header: $positive;


$color-text-dark: #333;
$color-text-light: white;

$color-noncurrent-month: rgba($color-text-dark, 0.3);
$color-check: rgba(white, 0.7);



$day-height: 3rem;

$day-labels: (vacation, fishing, walk, weekend, new);

$animation-easing: cubic-bezier(0.77, 0, 0.175, 1);

$label-speed: 1s;
$day-speed: 0.6s;
$bg-speed: 1s;

$header-height: $day-height * 2;

@mixin range($min, $max) {
  &:nth-child(n + #{$min}):nth-child(-n + #{$max}) {
    @content;
  }
}

@mixin clearfix {
  &:before, &:after {
      content: " ";
      display: table;
  }
  &:after { clear: both; }
}

@function day-span($days) {
  @return percentage($days / 7);
}



html, body {
  counter-reset: previous-month 29 current-month next-month;
}




.header-weekdays {
  background: $positive;
  color: rgba(#fff, .8);
  @include clearfix;
  li {
    font-size: 0.8rem;
    float: left;
    width: percentage(1/7);
    padding: 0.6rem 0;
    text-align: center;
    text-transform: uppercase;
  }
}



.calendar {
  @include clearfix();

  &.inactive {
    pointer-events: none;
  }
}

form.cbox-wrap {
  @include clearfix();
  background: $color-header;
}

.month {
  padding: .8rem;
  font-size: .8rem;
  // font-weight: bold;
  color: $color-text-dark;
  margin: 0;
}

.day {
  float: left;
  width: percentage(1/7);
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition-property: background, color;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
  background-color: $color-app;
  color: $color-text-dark;

  border-radius: 0;

  &.next-month { color: $color-noncurrent-month; }

  .device:not(:hover) & { transition-duration: 0; }

  &:after {
    display: block;
    transition-property: transform, opacity;
    transition-duration: $day-speed;
    transition-timing-function: $animation-easing;
  }

  &.current-month:after {
    content: counter(current-month);
    counter-increment: current-month;
  }

  &.next-month:after {
    content: counter(next-month);
    counter-increment: next-month;
  }

  &.previous-month:after {
    content: counter(previous-month);
    counter-increment: previous-month;
  }

  &.previous-month, &.next-month {
    color: $color-noncurrent-month;
  }

  &:last-of-type:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    width: 700%;
    height: 100%;
    background: $color-app;
  }



  &:hover,
  &:checked{
      background-color: rgba(0, 0, 0, 0.0);
      color: $color-text-light;
  }


  @for $day from 1 through 7 {
    &:nth-child(7n + #{$day}):after {
      transition-delay: (1/7) * ($day - 1) * $day-speed;
      animation-delay: (1/7) * ($day - 1) * $day-speed;
    }
  }
}
